<template>
  <div class="h-[64px] bg-transparent w-full text-[var(--color-btn-text)]">
    <div class="tools h-full w-full flex items-center">
      <div
        class="tools-item cursor-pointer flex justify-center items-center mr-[28px]"
        v-for="tools in toolsList"
        :key="tools.id"
        :class="tools.id === active ? 'active' : 'unactive'"
        @click="onChange(tools.id)"
      >
        <img class="w-[13px] h-[13px]" :src="tools.id === active ? tools.iconA : tools.icon" />
        <span class="ml-[4px]">{{ tools.name }}</span>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import Chatting from "@/assets/images/chatting/chatting.png";
import ChattingA from "@/assets/images/chatting/chatting-a.png";
import Aides from "@/assets/images/chatting/aides.png";
import AidesA from "@/assets/images/chatting/aides-a.png";
import Find from "@/assets/images/chatting/find.png";
import FindA from "@/assets/images/chatting/find-a.png";
import ALL from "@/assets/images/chatting/all.png";
import ALLA from "@/assets/images/chatting/all-a.png";
const props = defineProps({
    active:{
        type:Number,
        default:0
    }
})
const toolsList = ref([
  {
    name: "综合",
    id: 0,
    icon: ALL,
    iconA:ALLA,
    path: "",
  },
  {
    name: "对话",
    id: 1,
    icon: Chatting,
    iconA: ChattingA,
    path: "",
  },
  {
    name: "发现",
    id: 2,
    icon: Find,
    iconA: FindA,
    path: "",
  },
  {
    name: "数字助手",
    id: 3,
    icon: Aides,
    iconA: AidesA,
    path: "",
  },
]);
const emits = defineEmits(["change"])
const onChange = (id:number)=>{
    emits("change",id)
}
</script>
<style lang="scss" scoped>
.tools {
  &-item {
    padding: 8px 14px;
    border-radius: 20px;
    line-height: 16px;
  }
  .unactive{
    border: 1px solid transparent;

  }
  .active{
    background: #262932;
    border: 1px solid var(--el-color-primary);
  }
}
</style>
